<template>
    <div class="login-page">
        <van-nav-bar title="面经H5注册" />

        <van-form @submit="onSubmit">
            <van-field
                v-model="username"
                name="username"
                label="用户名"
                placeholder="用户名"
                :rules="[
                    { required: true, message: '请填写用户名' },
                    { pattern: /^\w{5,}$/, message: '用户名至少包含5个字符' }
                ]"
            />
            <van-field
                v-model="password"
                type="password"
                name="password"
                label="密码"
                placeholder="密码"
                :rules="[
                    { required: true, message: '请填写密码' },
                    { pattern: /^\w{6,}$/, message: '密码至少包含6个字符' }
                ]"
            />
            <div style="margin: 16px">
                <van-button square block type="primary" native-type="submit"
                    >提交</van-button
                >
            </div>
        </van-form>
        <router-link to="/login" class="right-a">登录账号</router-link>
    </div>
</template>

<script>
import request from '@/utils/request.js'
// 1. 组件里，引入，使用
import { Toast } from 'vant'
export default {
    name: 'RegisterPage',
    data() {
        return {
            username: '',
            password: ''
        }
    },
    methods: {
        // 点击提交按钮，从表单上获取数据，发送请求
        // async/await  + try catch
        async onSubmit(values) {
            try {
                console.log('submit', values)
                const res = await request.post('/h5/user/register', values)
                // 1. 提示注册成功
                this.$toast.success({
                    message: '注册成功',
                    duration: 1000
                })
                // 2. 跳到登录页
                this.$router.push('/login')
            } catch (err) {
                console.log(err)
                // 3. 注册失败，提示
                // this.$toast.fail(err)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.link {
    color: #069;
    font-size: 12px;
    padding-right: 20px;
    float: right;
}
.right-a {
    float: right;
    margin-right: 20px;
}
</style>
